<template>
  <div>
    <p style="margin-bottom: 20px;">设置该项目的网关</p>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      ref="tree"
      highlight-current
      :default-checked-keys="selected"
      >
    </el-tree>
    <el-button type="primary" style="" @click="saveDevice">保存</el-button>
  </div>
</template>
<script>

export default {
  name: 'devicelist',
  props: ['projectId', 'info'],
  data () {
    return {
      data: [],
      deviceList: [],
      selected: []
    }
  },
  mounted: function () {
    this.requestData()
  },
  methods: {
    requestData () {
      this.$http.get('/device/all').then((res) => {
        this.devicelist = res.data.deviceList
        this.data = this.devicelist.map((item, index) => {
          return {
            id: index,
            label: item.name,
            deviceId: String(item.id)
          }
        })
        if (!this.info || !this.info.gateways) {
          this.selected = []
        } else {
          this.selected
          var temp = this.data.filter((item) => {
            return this.info.gateways.indexOf(item.deviceId) !== -1
          })
          this.selected = temp.map((item) => {
            return item.id
          })
        }
      })
    },
    saveDevice () {
      this.$emit('save-device-setting', this.$refs.tree.getCheckedNodes())
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-tree {
  margin-bottom: 20px;
}
</style>
